<template>
  <div class="demo3-wrap">
    <h1>当前求和为：{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  name: 'Demo3',
  setup() {
    // 数据
    const sum = ref(0);

    // 组合式API写法
    console.log('----setup----');
    onBeforeMount(() => {
      console.log('----onBeforeMount----');
    });
    onMounted(() => {
      console.log('----onMounted----');
    });
    onBeforeUpdate(() => {
      console.log('----onBeforeUpdate----');
    });
    onUpdated(() => {
      console.log('----onUpdated----');
    });
    onBeforeUnmount(() => {
      console.log('----onBeforeUnmount----');
    });
    onUnmounted(() => {
      console.log('----onUnmounted----');
    });

    return {
      sum
    };
  }
};
</script>

<style lang="scss" scoped>
.demo3-wrap {
  & > h1 {
    margin-bottom: 20px;
  }
  & > button {
    cursor: pointer;
  }
}
</style>
